<template>
	<div class="dashboard">
		<el-row :gutter="10">
			<el-col :span="24">
				<el-card>
					<div>
						<div id="echarts01" :style="{width: '100%', height: '300px'}"></div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="10">
			<el-col :span="18">
				<el-card >
					<div>
						<div id="echarts02" :style="{width: '100%', height: '450px'}"></div>
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card :body-style="{ height: '430px' }">
					<template #header>
					    <div class="card-header">
					      <span>执勤人员</span>
					    </div>
					  </template>
					  <div v-for="o in 10" :key="o" class="text-item">
					    {{'执勤人员编号： ' + o +'号'}}
					  </div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		mounted() {
			this.drawLine1();
			this.drawLine2();
		},
		methods: {
			drawLine1() {
				let myChart = this.$echarts.init(document.getElementById('echarts01'))
				var option = {
					color: ['#409EFF'],
					title: {
						text: '某地区蒸发量和降水量',
						subtext: '纯属虚构'
					},
					toolbox: {
						show: true,
						feature: {
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ['line', 'bar']
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					xAxis: {
						type: 'category',
						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [120, {
							value: 200,
							itemStyle: {
								color: '#F56C6C'
							}
						}, 150, 80, 70, 110, 130, 80, 70, 110, 130, 110],
						type: 'bar'
					}]
				};
				myChart.setOption(option);
			},
			drawLine2() {
				let myChart = this.$echarts.init(document.getElementById('echarts02'))
				var option = {
					color:["#909399","#F56C6C","#E6A23C","#67C23A","#409EFF"],
					title: {
						text: '堆叠区域图'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#F56C6C'
							}
						}
					},
					legend: {
						data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
							name: '邮件营销',
							type: 'line',
							stack: '总量',
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							data: [120, 132, 101, 134, 90, 230, 210]
						},
						{
							name: '联盟广告',
							type: 'line',
							stack: '总量',
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							data: [220, 182, 191, 234, 290, 330, 310]
						},
						{
							name: '视频广告',
							type: 'line',
							stack: '总量',
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							data: [150, 232, 201, 154, 190, 330, 410]
						},
						{
							name: '直接访问',
							type: 'line',
							stack: '总量',
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							data: [320, 332, 301, 334, 390, 330, 320]
						},
						{
							name: '搜索引擎',
							type: 'line',
							stack: '总量',
							label: {
								show: true,
								position: 'top'
							},
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							data: [820, 932, 901, 934, 1290, 1330, 1320]
						}
					]
				};
				myChart.setOption(option);
			}
		}
	}
</script>

<style lang="scss">
	.dashboard {
		.text-item{
			height: 40px;
			line-height: 40px;
			border-bottom: 1px solid #edf0f2;
		}
	}
</style>
